<template>
  <div class="container">
    <img
      src="../../../static/images/reg_logo@2x.png"
      mode="aspectFill"
    >
    <!-- 直接登录无法调用wx.getUserInfo,需要授权！ -->
    <button @tap="handleLogin">登录</button>

    <button open-type="getUserInfo" @getuserinfo="getUserInfo" >授权登录</button>

  </div>
</template>

<script>
  import request from "../../utils/request.js";
  export default {
    data() {
      return {};
    },
    methods: {
      // 方式1：授权登录
      getUserInfo(e) {
        const { detail } = e.mp;
        // 获取code
        wx.login({
          success: res => {
            if (res.code) {
              // 授权接口需要的数据
              const data = {
                code: res.code,
                encryptedData: detail.encryptedData,
                iv: detail.iv,
                rawData: detail.rawData,
                signature: detail.signature
              };
              // 请求登录接口，获取token
              request
                .post(
                  "https://www.itjustfun.cn/api/public/v1/users/wxlogin",
                  data
                )
                .then(res => {
                  console.log(res);
                  const { token } = res.data.data;
                  // 把token保存到本地
                  wx.setStorageSync("token", token);
                });
              wx.navigateBack({
                delta:1
              })
            }
          }
        });
      },
      // 授权登录2：处理登录
      handleLogin() {
        // 打开权限设置页
        wx.openSetting({
          success(res) {
            // console.log(res.authSetting);
            // res.authSetting = {
            //   "scope.userInfo": true,
            //   "scope.userLocation": true
            // }

            // 如果授权成功，获取用户信息
            if (res.authSetting["scope.userInfo"]) {
              // 调用微信 wx.login接口获取code
              wx.login({
                success: res => {
                  if (res.code) {
                    // 获取code
                    console.log(res.code);
                    // 获取用户信息
                    wx.getUserInfo({
                      success: info => {
                        console.log("用户信息", info);
                        // 拼接登录接口需要的参数
                        const data = {
                          code: res.code,
                          encryptedData: info.encryptedData,
                          iv: info.iv,
                          rawData: info.rawData,
                          signature: info.signature
                        };
                        // 请求登录接口，获取token
                        request
                          .post(
                            "https://www.itjustfun.cn/api/public/v1/users/wxlogin",
                            data
                          )
                          .then(res => {
                            console.log(res);
                            const { token } = res.data.data;
                            // 把token保存到本地
                            wx.setStorageSync("token", token);
                          });
                      }
                    });
                  } else {
                    console.log("登录失败！" + res.errMsg);
                  }
                }
              });
            }
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 20rp;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    img {
      width: 120rpx;
      height: 120rpx;
    }
    button {
      margin-top: 50rpx;
      width: 100%;
    }
  }
</style>
